<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import MenuItem from './menuItem.vue';
import { useUserStore } from '@/stores/user';
import { storeToRefs } from 'pinia';
import { useRoute } from 'vue-router';

const route = useRoute();
const userStore = useUserStore();
const { user } = storeToRefs(userStore);

const menuItems = [
  { index: '/', label: '首页', icon: 'house' },
  { index: '/piece', label: '我的文章', icon: 'user' },
  { index: '/collections', label: '我的收藏', icon: 'star' },
  { index: '/friends', label: '粉丝与关注', icon: 'Avatar' },
  {
    index: '/system',
    label: '系统设置',
    icon: 'setting',
    children: [
      // { index: "/system/user", label: "用户管理", icon: "user" },
      // { index: "/system/role", label: "角色管理", icon: "suitcase" },
      // { index: "/system/menu", label: "菜单管理", icon: "document" },
      {
        index: '/system/contentManagement',
        label: '内容管理',
        icon: 'document'
      }
    ]
  }
];

// 根据用户角色过滤菜单项
const menuItemsFiltered = computed(() => {
  if (user.value?.role === 'admin') {
    return menuItems;
  } else {
    return menuItems.filter((item) => item.index !== '/system');
  }
});

const activeMenu = ref(route.path);
watch(
  () => route.path,
  (val) => {
    activeMenu.value = val;
  }
);
</script>

<template>
  <el-menu
    class="side-menu"
    :default-active="activeMenu"
    :router="true"
    background-color="#2d3a4b"
    text-color="#fff"
    active-text-color="#409eff"
    :collapse="false"
  >
    <MenuItem
      v-for="item in menuItemsFiltered"
      :key="item.index"
      :item="item"
    />
  </el-menu>
</template>

<style scoped lang="scss">
.side-menu {
  height: calc(100vh - 60px);
  width: 200px;
  background: #2d3a4b;
  border-right: 1px solid #e4e7ed;
  .el-menu-item {
    font-size: 16px;
    height: 48px;
    display: flex;
    align-items: center;
    .el-icon {
      margin-right: 10px;
    }
  }
}
</style>
